<template>
   <div class="Main">
    <app-header></app-header>
    <div class="page_content">
      <div class="paper">
        <div class="flex_item content">
          <div class="hd">
            <h1>
              {{conferenceProceedingArticle.title}}
              <a :href="conferenceProceedingArticle.fullText.replace('http://124.16.154.205:9000/','/minioUrl/')" target="_blank">
                查看全文
              </a>
            </h1>
          </div>

          <div class="bd" style="border-bottom: 1px solid #ced6e0">
            <ul style="margin-top: 0px">
              <li v-if="conferenceProceedingArticle.author">
                <b>作者：</b>
                <span>
                  {{conferenceProceedingArticle.author}}
                </span>
              </li>
              <li v-if="conferenceProceedingArticle.author">
                <b>机构：</b>
                <span>
                  {{conferenceProceedingArticle.institution}}
                </span>
              </li>

              <li v-if="conferenceProceedingArticle.serialNumber">
                <b>编号：</b
                >{{ conferenceProceedingArticle.serialNumber}}
              </li>
            </ul>
          </div>

          <div class="bd" style="margin-top: 15px">
            <!-- 中文摘要 -->
            <p
              v-if="conferenceProceedingArticle.description" style="overflow: auto">
              <b>摘要: </b><span v-html="conferenceProceedingArticle.description"></span>
            </p>

            <div class="brdge">
              <b>关键词: </b>
              <span>
                  {{ conferenceProceedingArticle.keyword }}
              </span>
            </div>

            <ul>
              <!-- 学科分类 -->
              <li v-if="conferenceProceedingArticle.subjects">
                <b>学科：</b>
                <span
                  v-if="conferenceProceedingArticle.subjects && conferenceProceedingArticle.subjects.length > 0"
                  class="subject-info"
                >
                  <span
                    v-for="(subject, index) in conferenceProceedingArticle.subjects"
                    :key="index"
                  >
                    {{ subject.replace("|_|", " >> ") }}
                    {{ index < conferenceProceedingArticle.subjects.length - 1 ? "," : "" }}
                  </span>
                </span>
              </li>

              <li v-if="conferenceProceedingArticle.fund">
                <b>资助基金：</b
                >{{ conferenceProceedingArticle.fund}}
              </li>
              <li v-if="conferenceProceedingArticle.pageNumber">
                <b>页码：</b
                >{{ conferenceProceedingArticle.pageNumber}}
              </li>
              <li v-if="conferenceProceedingArticle.price">
                <b>单篇价格：</b
                >{{ conferenceProceedingArticle.price}}
              </li>
              
               <!-- 资源类别 -->
              <li v-if="conferenceProceedingArticle.sourceTypes">
                <b>资源类别：</b>
                <span
                  v-if="conferenceProceedingArticle.sourceTypes && conferenceProceedingArticle.sourceTypes.length > 0"
                  class="subject-info"
                >
                  <span
                    v-for="(item, index) in conferenceProceedingArticle.sourceTypes"
                    :key="index"
                  >
                    {{ item.replace("|_|", " >> ") }}
                    {{ index < conferenceProceedingArticle.sourceTypes.length - 1 ? "," : "" }}
                  </span>
                </span>
              </li>


               <!-- 资源标签 -->
              <li v-if="conferenceProceedingArticle.sourceTagss">
                <b>资源标签：</b>
                <span
                  v-if="conferenceProceedingArticle.sourceTagss && conferenceProceedingArticle.sourceTagss.length > 0"
                  class="subject-info"
                >
                  <span
                    v-for="(item, index) in conferenceProceedingArticle.sourceTagss"
                    :key="index"
                  >
                    {{ item.replace("|_|", " >> ") }}
                    {{ index < conferenceProceedingArticle.sourceTagss.length - 1 ? "," : "" }}
                  </span>
                </span>
              </li>

            </ul>

            <!-- 文章统计信息 -->
            <p class="metricsInfo">
              <span>
                <strong class="labelItem">点击量</strong>
                <strong>{{ conferenceProceedingArticle.hit || 0 }}次</strong>
              </span>
              <span>
                <strong class="labelItem">下载次数</strong>
                <strong>{{ conferenceProceedingArticle.downloadNum || 0 }}次</strong>
              </span>
              <span>
                <strong class="labelItem">被引次数</strong>
                <strong>{{ conferenceProceedingArticle.quoteNum || 0 }}次</strong>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import {GetEntityConferenceProceedingArticle} from "@/service/conference";
import {XCard} from "@zkwq/business";
export default {
  name: 'ConferenceArticleDetail',
  components: {
    AppHeader,
    AppFooter,
    XCard
  },
  data() {
    return {
      loading:false,
      loadingArticle:false,
      conferenceProceedingArticleId:'',
      conferenceProceedingArticle:{},
    }
  },
  mounted() {
    this.conferenceProceedingArticleId = this.$route.params.id;
    this.getEntityConferenceProceedingArticle();
  },
  methods: {
     getEntityConferenceProceedingArticle(){
        GetEntityConferenceProceedingArticle(this.conferenceProceedingArticleId).then(e => {
              if (e && e.data){
                  this.conferenceProceedingArticle = e.data;
              }
          }).catch(e => {
              this.$message.error(e.message)
          }) 
    },
  },
}
</script>

<style lang="scss" scoped>
.Main{
    height:100%;
    width: 100%;
    overflow: auto;
    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .base-button--primary {
        background-color: #3F7FA7;
        border-color: #3F7FA7;
    }
    .base-select{
      width: 100px;
      margin-right: 20px;
    }
    .base-input__placeholder{
        left: 12px;
    }
    .page-warp{
      width: 100%;
      text-align: center;
      margin-top: 40px;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        background-color: #fff;
        border-radius: 5px;
        border-top: 3px solid #409eff;
        /* 论文详情框 */
        .paper {
          border-radius: 8px;
          padding: 30px;
          margin-bottom: 20px;
        }

        /* 文章标题样式 */
        .paper .content .hd h1 {
          width: 100%;
          font-family: Source Han Sans CN;
          color: var(--text-primary);
          font-size: 22px;
          letter-spacing: -1px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 15px;
        }

        /* 文章标题链接样式 */
        .paper .content .hd h1 a {
          display: inline-block;
          color: var(--secondary-color);
          cursor: pointer;
          font-size: 15px;
          font-weight: 500;
          padding: 6px 12px;
          margin-left: 10px;
          background-color: var(--highlight-bg);
          border-radius: 4px;
          text-decoration: none;
          transition: all 0.2s ease;
        }

        .paper .content .hd h1 a:hover {
          background-color: rgba(32, 75, 227, 0.1);
          transform: translateY(-1px);
        }

        /* 英文标题样式 */
        .paper .content .hd .p {
          color: var(--text-secondary);
          font-size: 16px;
          line-height: 1.5;
          margin: 0 0 15px;
          padding-left: 10px;
          border-left: 3px solid var(--primary-color);
        }

        /* 内容区域样式 */
        .paper .content .bd {
          line-height: 1.6;
          color: var(--text-primary);
          padding-bottom: 20px;
        }

        /* 作者列表 */
        .bd ul {
          list-style: none;
          padding-left: 0;
          margin-top: 15px;
          margin-bottom: 20px;
        }

        .bd ul li {
          margin-bottom: 12px;
          display: flex;
          align-items: flex-start;
        }

        .bd ul li b {
          display: inline-block;
          min-width: 70px;
          font-weight: 600;
          font-family: Source Han Sans CN;
          font-size: 14px;
        }

        /* 作者链接样式 - 改为蓝色系 */
        .bd ul li a {
          color: var(--primary-color);
          text-decoration: none;
          transition: all 0.2s ease;
        }

        .bd ul li a:hover {
          text-decoration: none;
          color: var(--secondary-color);
        }

        /* 摘要样式 */
        .paper .content .bd p {
          line-height: 1.6;
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 14px;
          justify-content: end;
        }

        .paper .content .bd p b {
          font-family: Source Han Sans CN;
          font-size: 14px;
        }

        /* 关键词样式 */
        .spankwd {
          display: inline-block;
          background-color: rgba(9, 109, 217, 0.05);
          border: 1px solid rgba(9, 109, 217, 0.1);
          padding: 5px 14px;
          border-radius: 20px;
          margin-right: 10px;
          margin-bottom: 10px;
          transition: all 0.3s ease;
        }

        .spankwd:hover {
          background-color: rgba(9, 109, 217, 0.1);
          transform: translateY(-1px);
        }

        .spankwd a {
          color: var(--primary-color);
          text-decoration: none;
          font-size: 14px;
          font-family: Source Han Sans CN;
        }

        /* 文章信息计数 */
        .metricsInfo {
          display: flex;
          background-color: var(--bg-light);
          padding: 12px 15px;
          border-radius: 6px;
          margin: 20px 0;
          font-family: Source Han Sans CN;
          font-size: 14px;
        }

        .metricsInfo span {
          margin-right: 20px;
          display: flex;
          align-items: start;
        }

        .metricsInfo img {
          margin-right: 5px;
          height: 16px;
          width: 16px;
        }

        .metricsInfo .labelItem {
          color: var(--light-blue);
          width: auto;
          height: 15px;
          margin: 0 5px;
          font-size: 15px;
        }

        /* 章节标题 */
        .ft h4 span {
          display: inline-block;
          background-color: var(--primary-color);
          color: #fff;
          line-height: 36px;
          padding: 0 15px;
          border-radius: 4px;
          margin-top: 20px;
          font-family: Source Han Sans CN;
          font-size: 15px;
          font-weight: 500;
          display: flex;
          align-items: center;
        }

        .ft h4 span svg {
          margin-right: 8px;
        }

        /* 版本列表表格 */
        .ft table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 10px;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .ft table td {
          padding: 12px 15px;
          border-bottom: 1px solid var(--border-color);
        }

        .ft table tr:last-child td {
          border-bottom: none;
        }

        .ft table tr:hover {
          background-color: var(--hover-color);
        }

        /* 下载按钮 */
        .ft table a.btn {
          display: inline-block;
          background-color: var(--primary-color);
          color: #fff;
          padding: 5px 12px;
          border-radius: 4px;
          text-decoration: none;
          transition: all 0.2s ease;
        }

        .ft table a.btn:hover {
          background-color: var(--secondary-color);
          transform: translateY(-1px);
          box-shadow: 0 2px 5px rgba(32, 75, 227, 0.2);
        }

        /* 评论区域 */
        .comment-list {
          margin-top: 15px;
        }

        .comment-item {
          padding: 15px;
          border-radius: 6px;
          margin-bottom: 10px;
          background-color: #fff;
          border: 1px solid var(--border-color);
          transition: all 0.2s ease;
        }

        .comment-item:hover {
          border-color: var(--primary-color);
          box-shadow: 0 2px 8px rgba(9, 109, 217, 0.1);
        }

        .comment-item-highlight {
          background-color: var(--bg-light);
        }

        .comment-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          padding-bottom: 5px;
          border-bottom: 1px dashed var(--border-color);
        }

        .comment-author {
          font-weight: 500;
          color: var(--secondary-color);
          font-size: 15px;
        }

        .comment-date {
          color: var(--text-secondary);
          font-size: 14px;
        }

        .comment-content {
          line-height: 1.6;
          font-size: 14px;
          color: var(--text-primary);
        }

        .no-comments {
          padding: 30px;
          text-align: center;
          color: var(--text-secondary);
          background-color: var(--bg-light);
          border-radius: 6px;
          margin-top: 15px;
        }



        /* 评分表单 */
        .rating-form-item {
          margin-bottom: 20px;
        }

        .rating-container {
          padding: 5px 0;
        }




        /* 统计信息区域美化 */
        .metricsInfo {
          display: flex;
          align-items: center;
          background-color: var(--bg-light);
          padding: 15px;
          border-radius: 6px;
          margin: 20px 0;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        }

        .metricsInfo span {
          margin-right: 25px;
          display: flex;
          align-items: start;
          color: var(--text-secondary);
          font-size: 14px;
        }

        .metricsInfo img {
          margin-right: 8px;
          height: 18px;
          width: 18px;
          opacity: 0.8;
        }

        .metricsInfo .labelItem {
          color: var(--secondary-color);
          font-weight: 500;
          margin: 0 5px 0 0;
          font-size: 14px;
        }

        /* 移除链接下划线，采用更现代的样式 */
        .bd ul li a {
          color: var(--primary-color);
          text-decoration: none;
          transition: all 0.2s ease;
        }

        /* 修改评论区头部样式，使按钮和标题在同一行 */
        .ft h4 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
        }

        .ft h4 span {
          display: flex;
          align-items: center;
          background-color: var(--primary-color);
          color: #fff;
          padding: 0 15px;
          border-radius: 4px;
          height: 36px;
          font-family: Source Han Sans CN;
          font-size: 15px;
          font-weight: 500;
}

.ft h4 .comment-btn {
	position: absolute;
	right: 0;
	margin-right: 15px;
	height: 32px;
	line-height: 32px;
	padding: 0 15px;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* 优化引用区域样式 */
.bd ul li {
	margin-bottom: 15px;
	display: flex;
	align-items: flex-start;
	line-height: 1.6;
}

#copyBtn {
	display: inline-block;
	background-color: var(--bg-light);
	color: var(--primary-color) !important;
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: 8px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.2s ease;
}

#copyBtn:hover {
	background-color: var(--primary-color);
	color: white !important;
}

/* 优化版本/状态显示 */
.ft table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ft table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
}

/* 下载按钮样式改进 */
.ft table a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: #fff;
	padding: 6px 15px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.25s ease;
	font-weight: 500;
	gap: 5px;
	/* 为图标预留间距 */
}

.ft table a.btn:hover {
	background-color: var(--secondary-color);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(32, 75, 227, 0.2);
}

/* 为下载按钮添加图标 */
.ft table a.btn:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 16l-5-5h3V4h4v7h3l-5 5zm5 4v-2h-10v2h10z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}

/* 出版状态显示优化 */
.comment-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: normal;
	background-color: var(--highlight-bg);
	color: var(--primary-color);
	border: 1px solid rgba(9, 109, 217, 0.1);
}
      
      }
}
</style>
